<template>
  <div class="discovery-container">
    <!-- 轮播图 -->
    <el-carousel
      class=""
      :interval="4000"
      type="card"
    >
      <el-carousel-item
        v-for="(item,index) in picList "
        :key="index"
      >
        <img
          :src="item.imageUrl"
          alt=""
          @click="getLBM(item.targetId)"
        />
      </el-carousel-item>
    </el-carousel>
    <!-- 推荐歌单 -->
    <div class="recommend">
      <h3 class="title">
        推荐歌单
      </h3>
      <div class="items">
        <div
          class="item"
          v-for="(item,index) in commentData"
          :key="index"
          @click="sendList(item.id)"
        >
          <div class="img-wrap">
            <div class="desc-wrap">
              <span class="desc">{{item.copywriter}}</span>
            </div>
            <img
              :src="item.picUrl"
              alt=""
            />
            <span class="iconfont icon-play"></span>
          </div>
          <p class="name">{{item.name}}</p>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="news">
      <h3 class="title">
        最新音乐
      </h3>
      <div class="items">
        <div
          class="item"
          v-for="(item,index) in hotData"
          :key="index"
        >
          <div class="img-wrap" @click="getLBM(item.id,hotData)">
            <img
              :src="item.picUrl"
              alt=""
            />
            <span class="iconfont icon-play"></span>
          </div>
          <div class="song-wrap">
            <div class="song-name">{{item.song.name}}</div>
            <div class="singer">{{item.song.artists[0].name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐MV -->
    <div class="mvs">
      <h3 class="title">推荐MV</h3>
      <div class="items">
        <div class="item" v-for="(item,index) in mvData" :key="index" @click="sendMv(item.id)">
          <div class="img-wrap">
            <img
              :src="item.picUrl"
              alt=""
            />
            <span class="iconfont icon-play"></span>
            <div class="num-wrap">
              <div class="iconfont icon-play"></div>
              <div class="num">{{item.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{item.name}}</div>
            <div class="singer">{{item.artistName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDiscovery,  getComment, getHot,getMVMusic } from "@/api/discovery"
import {getLunBoMusic} from '@/api/getMusic'
export default {
  name: 'discovery',
  data () {
    return {
      picList: [], //轮播如图的数据
      commentData: [], //推荐歌单的数据
      hotData: [],//热门歌曲的数据
      mvData:[]//mv的数据
    }
  },
  created () {
    this.getList() //调用轮播图的数据
    this.getRecomment()//调用推荐歌单的数据
    this.getHotMusic() //热门歌曲
    this.getMV()//调用mv推荐的区域
  },
  methods: {
    // 点击mv进行跳转
    sendMv(id){
      this.$router.push({
        name:'mv',
        query:{
          id
        }
      })
    },
    // 点击推荐歌单进行跳转
    sendList(id){
      this.$router.push(`/playlist?id=${id}`)
    },
    // 获取mv的数据
    async getMV(){
    const {data}=await getMVMusic()
    console.log(data);
    this.mvData=data.result

    },
    // 获取最新歌曲
    async getHotMusic () {
      const { data } = await getHot()
      this.hotData = data.result

    },
    // 获取推荐歌单
    async getRecomment () {
      const { data } = await getComment()
      this.commentData = data.result
    },
    // 获取轮播图的信息
    async getList () {
      const { data } = await getDiscovery()
      console.log(data);
      this.picList = data.banners

    },
    // 轮播图的歌曲信息
    async getLBM (id,item) {
      const { data: { data } } = await getLunBoMusic(id)
        if(!data[0].url){
         this.$message.warning('暂无法播放')
        //  调用下一首
        this.$store.dispatch('getAction')
        }
       else{
          // 保存播放的路径
        this.$store.commit('getUrl', data[0].url)
        // 保存id
        this.$store.commit('getId',id)
        // 将数据保存到
        this.$store.commit('getArr',item)
       }

    }
  },
};
</script>

<style >
</style>
